import { useDispatch, useSelector } from "react-redux";
import Header from "../../componets/Header";
import st from "./filter.module.css";
import { useEffect, useState } from "react";
import { actions } from "../../store/searchFormSlice";
import { useNavigate } from "react-router";
import { createPortal } from "react-dom";
// 引入格式化时间的工具函数
import { formatDate } from "./formatDate";
// 引入antd-mobile中的日历选择器
import { CalendarPicker } from "antd-mobile";
import PopAlert from "../../componets/PopAlert";

// 渲染函数
const FilterView = () => {
  // 引入全局状态
  const data = useSelector((state: any) => state).searchForm;
  console.log("redux的=====》", data);
  // 组件收集数据的对象
  // 收集到的表单信息  只有当点击确定按钮之后，再dispatch一个action将这个formdata的数据同步到redux
  const [form, setForm] = useState(data);
  console.log("组件的======》", form);

  //弹窗
  const [visable, setVisable] = useState(false);
  return (
    <div className={st.container}>
      <Header leftIcon={true}>高级查询</Header>
      <div className={st.filterBox}>
        <FilterItem title={"性别"}>
          {[
            { id: 0, text: "女", value: "2" },
            { id: 1, text: "男", value: "1" },
            { id: 2, text: "未知", value: "0" },
          ].map((item: any) => (
            <TagItem
              text={item.text}
              value={item.value}
              key={item.id}
              onClick={() => setForm({ ...form, gender: item.value })}
              data={form.gender}
            />
          ))}
        </FilterItem>
        <FilterItem title={"生日"}>
          <InputItem
            stext={"开始时间"}
            etext={"结算时间"}
            data={form.birthday}
            type={"birthday"}
            form={form}
            setForm={setForm}
            setPop={setVisable}
          />
        </FilterItem>
        <FilterItem title={"注册来源"}>
          {[
            { id: 0, text: "微信公众号", value: "1" },
            { id: 1, text: "微信小程序", value: "2" },
            { id: 2, text: "会员档案", value: "3" },
          ].map((item: any) => (
            <TagItem
              text={item.text}
              value={item.value}
              key={item.id}
              onClick={() => setForm({ ...form, regOrigin: item.value })}
              data={form.regOrigin}
            />
          ))}
        </FilterItem>
        <FilterItem title={"注册时间"}>
          <InputItem
            stext={"开始时间"}
            etext={"结算时间"}
            data={form.regTime}
            type={"regTime"}
            form={form}
            setForm={setForm}
            setPop={setVisable}
          />
        </FilterItem>
        <FilterItem title={"会员状态"}>
          {[
            { id: 0, text: "启用", value: "1" },
            { id: 1, text: "停用", value: "0" },
          ].map((item: any) => (
            <TagItem
              text={item.text}
              value={item.value}
              key={item.id}
              onClick={() => setForm({ ...form, memberState: item.value })}
              data={form.memberState}
            />
          ))}
        </FilterItem>
        <FilterItem title={"累积消费金额"}>
          <InputItem
            stext={"最小金额"}
            etext={"最大金额"}
            data={form.consumeMoney}
            type={"consumeMoney"}
            isDate={false}
            form={form}
            setForm={setForm}
          />
        </FilterItem>
        <FilterItem title={"累积消费次数"}>
          <InputItem
            stext={"最少次数"}
            etext={"最多次数"}
            data={form.consumeTimes}
            type={"consumeTimes"}
            isDate={false}
            form={form}
            setForm={setForm}
          />
        </FilterItem>
        <FilterItem title={"最近消费日期"}>
          <InputItem
            stext={"开始时间"}
            etext={"结算时间"}
            data={form.lastConsumeDate}
            type={"lastConsumeDate"}
            form={form}
            setForm={setForm}
            setPop={setVisable}
          />
        </FilterItem>
        <FilterItem title={"微信状态"}>
          {[
            { id: 0, text: "在粉", value: "1" },
            { id: 1, text: "掉粉", value: "0" },
          ].map((item: any) => (
            <TagItem
              text={item.text}
              value={item.value}
              key={item.id}
              onClick={() => setForm({ ...form, status: item.value })}
              data={form.status}
            />
          ))}
        </FilterItem>
        <ButtonBar form={form} setForm={setForm} />
        <PopAlert
          visable={visable}
          onClose={() => setVisable(false)}
          // 貌似这个确认的回调没啥用
          onConfirm={() => {}}
        >
          小值不能大于大值
        </PopAlert>
      </div>
    </div>
  );
};

// 成员项
const FilterItem = ({ children, title }: any) => {
  return (
    <div className={st.filterItem}>
      <span className={st.title}>{title}</span>
      <div className={st.valueField}>{children}</div>
    </div>
  );
};

// tags
const TagItem = ({ text, value, onClick, data }: any) => {
  return (
    <div
      className={`${st.tags} ${value === data ? st.active : ""}`}
      onClick={onClick}
    >
      {text}
    </div>
  );
};

// inputs
const InputItem = ({
  stext,
  etext,
  data,
  type,
  isDate = true,
  setForm,
  form,
  setPop,
}: any) => {
  // bug  日历弹窗不显示   传送门到body，但是body没有高度，所以不显示
  // bug  输入的内容  左侧输入框的值只能比右侧输入框的值小，不能大，如果不符合条件，则跳出提示框
  const [visable, setVisable] = useState(false);
  const singleDate: Date = new Date();
  const [which, setWitch] = useState("");
  // 控制数字输入框的校验提示
  const [numAlert, setNumAlert] = useState(false);

  // 日历大小校验
  useEffect(() => {
    if (type == "consumeMoney" || type == "consumeTimes") {
      // bug  金钱可以带小数，但次数应该不能带次数的这里能带  小数也不能一直可以输入，最大输入两位
      if (
        (form[type].min ?? form[type].max) &&
        Number(form[type].min) > Number(form[type].max)
      ) {
        setNumAlert(true);
      } else {
        setNumAlert(false);
      }
      if (isNaN(Number(form[type].min)) || isNaN(Number(form[type].max))) {
        setNumAlert(true);
      }
      return;
    }
    // bug   数字无法正常输入   比如第一个3  第二个输入我无法输入12，22等第一个数字比3小的
    if (form[type].min && form[type].max && form[type].min > form[type].max) {
      setPop(true);
      setForm({ ...form, [type]: { min: "", max: "" } });
    }
  }, [form]);

  return (
    <>
      <div className={st.inputField}>
        <input
          type="text"
          className={st.startInput}
          placeholder={stext}
          readOnly={isDate}
          value={data.min}
          onClick={
            isDate
              ? () => {
                  setVisable(true);
                  setWitch("min");
                }
              : () => {}
          }
          onChange={
            !isDate
              ? (e) => {
                  setForm({
                    ...form,
                    [type]: { ...data, min: e.target.value },
                  });
                }
                
              : () => {}
          }
        />
        <span className={st.linkFont}>至</span>
        <input
          type="text"
          className={st.endInput}
          placeholder={etext}
          readOnly={isDate}
          value={data.max}
          onClick={
            isDate
              ? () => {
                  setVisable(true);
                  setWitch("max");
                }
              : () => {}
          }
          onChange={
            !isDate
              ? (e) => {
                  setForm({
                    ...form,
                    [type]: { ...data, max: e.target.value },
                  });
                }
              : () => {}
          }
        />
      </div>
      {
        <div className={`${st.numberAlert} ${numAlert ? st.showNumAlert : ""}`}>
          ×
        </div>
      }
      {createPortal(
        <CalendarPicker
          visible={visable}
          onClose={() => setVisable(false)}
          defaultValue={singleDate}
          selectionMode="single"
          onMaskClick={() => setVisable(false)}
          // 这里的方法调用传进来的事件处理函数，去修改对应的redux
          onConfirm={(val) =>
            setForm({
              ...form,
              [type]: { ...data, [which]: formatDate(val as Date) },
            })
          }
        />,
        document.body
      )}
    </>
  );
};

// buttonBar
const ButtonBar = ({ form, setForm }: any) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  // 点击确定，将组件的state同步到redux中  并进行路由跳转
  const handleClick = () => {
    // bug  缺少点击确定校验数字输入合法性（日历的校验在选择时就已完成）

    dispatch(
      actions.setSearchParam({
        type: "update",
        data: form,
      })
    );
    navigate(-1);
  };
  return (
    <div className={st.btnBar}>
      <div
        className={st.reset}
        onClick={() => {
          setForm({
            gender: "",
            birthday: { min: "", max: "" },
            regOrigin: "",
            regTime: { min: "", max: "" },
            memberState: "",
            consumeMoney: { min: "", max: "" },
            consumeTimes: { min: "", max: "" },
            lastConsumeDate: { min: "", max: "" },
            status: "",
          });
          dispatch(
            actions.setSearchParam({
              type: "update",
              data: form,
            })
          );
        }}
      >
        重置
      </div>
      <div className={st.confirm} onClick={handleClick}>
        确定
      </div>
    </div>
  );
};

export default FilterView;
